{% extends 'base.html' %}
{% block card %}{% endblock %}
{% block list %}
<li class="nav-item">
  <a class="nav-link" href="{% url 'upload:upload' %}">Simple Upload</a>
</li>
{% endblock %}
{% block content %}
<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Action</th> 
        <th>Mechanism</th>
        <th>Thermo</th>
        <th>Transport</th>
        <th>Surface</th>
    </tr>
  </thead>
  <tbody>
    {% for mech in mechanisms %}
      <tr>
        <td> {{ forloop.counter }} {{ j }}</td>
          <td>
            <a href="{% url 'upload:mechanism_detail' mech.id %}">
              <button type="button" class="btn btn-primary btn-sm">Details</button>
            </a>
          </td>
        <td>
          {% if mech.ck_mechanism_file %}
            <a href="{{ mech.ck_mechanism_file.url }}"><p class="mechanism">{{ mech.ck_mechanism_file.name }}</p></a>
          {% else %}
            <span class="text-muted">No File Attached</span>
          {% endif %} 
        </td>
        <td>
          {% if mech.ck_thermo_file %}
          <a href="{{ mech.ck_thermo_file.url }}"><p class="thermo">{{ mech.ck_thermo_file.name }}</p></a>
          {% else %}
            <span class="text-muted">No File Attached</span>
          {% endif %}  
        </td>
        <td>
          {% if mech.ck_transport_file %}
          <a href="{{ mech.ck_transport_file.url }}"><p class="transport">{{ mech.ck_transport_file.name }}</p></a>
          {% else %}
            <span class="text-muted">No File Attached</span>
          {% endif %}  
        </td>
        <td>
          {% if mech.ck_surface_file %}
          <a href="{{ mech.ck_surface_file.url }}"><p class="surface">{{ mech.ck_surface_file.name }}</p></a>
          {% else %}
            <span class="text-muted">No File Attached</span>
          {% endif %}  
        </td>
      </tr>
    {% endfor %}

  </tbody>   
</table>


<a href="{% url 'upload:upload' %}">
  <button type="button" class="btn btn-primary btn-sm">Upload new mechanism</button>
</a>

<script>
var elements = document.getElementsByClassName("mechanism");
for(var i=0; i<elements.length; i++){
    var text = elements[i].textContent;
    elements[i].innerHTML = text.replace(/.*\//, '');
}
var elements = document.getElementsByClassName("thermo");
for(var i=0; i<elements.length; i++){
    var text = elements[i].textContent;
    elements[i].innerHTML = text.replace(/.*\//, '');
}

var elements = document.getElementsByClassName("transport");
for(var i=0; i<elements.length; i++){
    var text = elements[i].textContent;
    elements[i].innerHTML = text.replace(/.*\//, '');
}

var elements = document.getElementsByClassName("surface");
for(var i=0; i<elements.length; i++){
    var text = elements[i].textContent;
    elements[i].innerHTML = text.replace(/.*\//, '');
}


</script>
{% endblock %}
